<template>
  <div>
    <!-- 文件上传框 -->
    <van-uploader
      v-model="images"
      multiple
      :max-count="5"
      result-type="dataUrl"
    />
    <!-- 商品信息编辑 -->
    <van-cell-group>
      <van-field size="large" v-model="name" placeholder="请输入商品名" />
      <van-field
        size="large"
        type="textarea"
        v-model="info"
        placeholder="请输入商品描述信息"
      />
      <van-field
        size="large"
        type="number"
        v-model="in_stock"
        placeholder="请输入商品库存"
      />
      <van-field
        size="large"
        v-model="original_price"
        placeholder="请输入商品原价"
      />
      <van-field
        size="large"
        v-model="current_price"
        placeholder="请输入商品现价"
      />
      <van-field
        size="large"
        v-model="item_class"
        placeholder="请输入商品类别"
      />
    </van-cell-group>

    <div style="position:fixed; bottom:0; width:100%;">
      <div style="padding: 15px;">
        <van-button round size="large" type="primary" @click="onSubmitClick"
          >保存设置</van-button
        >
        <van-button
          v-if="this.$route.params.editType === 'editOld'"
          style="margin-top: 10px;"
          color="#f44"
          round
          size="large"
          type="danger"
          @click="onCancelClick"
          >删除商品</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Uploader, Field, CellGroup, Toast, Button } from "vant"
import { axios, API_URL } from "../../api"
export default {
  components: {
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  data() {
    return {
      item_id: "",
      name: "",
      original_price: "",
      current_price: "",
      info: "",
      in_stock: "",
      item_class: "",
      images: [],
      images_rev: []
    }
  },

  methods: {
    /* 上传图片格式预处理 */
    purify_images() {
      var pure_images = []
      this.images.forEach(item => {
        pure_images.push(item.content.replace(/data:image\/[^;]+;base64,/i, ""))
      })
      return pure_images
    },
    /* 下载图片格式预处理 */
    addHead() {
      let tmp = []
      this.images_rev.forEach(item => {
        tmp.push({ content: "data:image/jpeg;base64," + item, file: {} })
      })
      return tmp
    },
    onSubmitClick() {
      if (
        !this.name ||
        !this.original_price ||
        !this.current_price ||
        !this.info ||
        !this.in_stock ||
        !this.item_class ||
        !this.images.length
      ) {
        Toast("请填写所有项")
        //新添加商品表单
      } else if (this.$route.params.editType === "addNew") {
        axios
          .post(
            API_URL + "item/create",
            {
              images: this.purify_images(),
              name: this.name,
              original_price: this.original_price,
              current_price: this.current_price,
              in_stock: this.in_stock,
              info: this.info,
              item_class: this.item_class
            },
            {
              headers: {
                Authorization: this.$store.state.shop_token
              }
            }
          )
          .then(() => {
            Toast("保存商品信息成功")
            this.$router.go(-1)
          })
          .catch(err => {
            console.error(err)
          })
      } else {
        // 编辑旧添加商品表单
        axios
          .put(
            API_URL + "items/" + this.item_id,
            {
              images: this.purify_images(),
              name: this.name,
              original_price: this.original_price,
              current_price: this.current_price,
              item_class: this.item_class,
              in_stock: this.in_stock,
              info: this.info
            },
            {
              headers: {
                Authorization: this.$store.state.shop_token
              }
            }
          )
          .then(() => {
            Toast("修改商品信息成功")
            this.$router.go(-1)
          })
          .catch(err => {
            if (err.response.status == 401) {
              this.$router.push({ name: "shopLogin" })
            }
            console.error(err)
          })
      }
    },
    onCancelClick() {
      axios
        .delete(API_URL + "items/" + this.item_id, {
          headers: {
            Authorization: this.$store.state.shop_token
          }
        })
        .then(() => {
          Toast("删除商品成功")
          this.$router.go(-1)
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.$router.push({ name: "shopLogin" })
          }
          console.error(err)
        })
    }
  },
  /* 预载商品信息 */
  mounted: function() {
    if (this.$route.params.editType != "addNew") {
      this.item_id = this.$route.params.item_id
      axios
        .get(API_URL + "items/" + this.item_id, {})
        .then(response => {
          this.name = response.data.name
          this.current_price = response.data.current_price
          this.original_price = response.data.original_price
          this.in_stock = response.data.in_stock
          this.info = response.data.info
          this.sales = response.data.sales
          this.shop_id = response.data.shop_id
          this.item_class = response.data.item_class
          this.images_rev = response.data.images
          this.images = this.addHead(this.images_rev)
        })
        .catch(err => {
          if (err.response.status == 401) {
            this.$router.push({ name: "shopLogin" })
          }
          console.error(err)
        })
    }
  }
}
</script>
